<template>
  <div class="mg-lt-16 pd-rt-16 fx-ct-ct">
    <img
      class="ic-20 mg-rt-16 mg-lt-16 cs-pt"
      @click="handleScreen"
      src="@/assets/icons/scale.png"
    />
    <TrDropdown
      v-model="lanValue"
      :dataList="$website.languageList"
      @dropBack="changeLanHandle"
    >
      <img class="ic-20 mg-rt-4" src="@/assets/icons/language.png" />
    </TrDropdown>
    <div class="divide-line"></div>
    <div
      class="login-btn ft-12 cr-wt-10 ht-24 lh-22 pd-lf-16 pd-rt-16 bd-rd-12 cs-pt"
      @click="jumpHandle"
    >
      {{ $t("login.btn") }} MES
    </div>
  </div>
</template>

<script>
import { fullscreenToggel, listenfullscreen } from "@/utils/util";
import TrDropdown from "@/components/Tr-dropdown/Tr-dropdown.vue";
import { mapGetters } from "vuex";
export default {
  name: "OperationBox",
  components: {
    TrDropdown,
  },
  computed: {
    ...mapGetters(["language"]),
  },

  data: () => ({
    lanValue: "",
  }),
  methods: {
    changeLanHandle(val) {
      this.$store.commit("SET_LANGUAGE", val.value);
      this.$i18n.locale = val.value;
    },
    handleScreen() {
      fullscreenToggel();
    },
    setScreen() {
      this.$store.commit("SET_FULLSCREN");
    },
    jumpHandle() {
      this.$router.go(-1);
    },
  },
  mounted() {
    this.lanValue = this.language;
    listenfullscreen(this.setScreen);
  },
};
</script>

<style scoped lang="scss">
.login-btn {
  border: 1px solid rgba(255, 255, 255, 0.4);
}
</style>
